<style lang="less" scoped>
  @import './user.less';
</style>
<template>
  <div>
    <Row>
      <Col span="24">
        <Card style="margin-bottom: 10px">
          <Form inline>
            <FormItem style="margin-bottom: 0">
              <Select v-model="searchConf.type" clearable placeholder="请选择类别" style="width:100px">
                <Option :value="1">用户账号</Option>
                <Option :value="2">用户昵称</Option>
              </Select>
            </FormItem>
            <FormItem style="margin-bottom: 0">
              <Input v-model="searchConf.keywords" placeholder=""></Input>
            </FormItem>
            <FormItem style="margin-bottom: 0">
              <Button type="primary" @click="search">{{ $t('find_button') }}/{{ $t('refresh_button') }}</Button>
            </FormItem>
          </Form>
        </Card>
      </Col>
    </Row>
    <Row>
      <Col span="24">
        <Card>
          <div>
            <Table width="100%" :loading="listLoading" :columns="columnsList" :data="tableData" border disabled-hover></Table>
          </div>
          <div class="margin-top-15" style="text-align: center">
            <Page :total="tableShow.listCount" :current="tableShow.currentPage"
                  :page-size="tableShow.pageSize" @on-change="changePage"
                  @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
          </div>
        </Card>
      </Col>
    </Row>
    <Modal  v-model="modalAudit.show" width="668" :styles="{top: '30px'}" @on-visible-change="doCancel">
      <p slot="header" style="color:#2d8cf0">
        <Icon type="md-alert" />
        <span>驳回实名</span>
      </p>
      <Row>
        <Form ref="myForm" :model="formItem" :label-width="100">
          <FormItem label="备注">
            <Input v-model="formItem.memo" placeholder="请输入备注" type="textarea" :rows="4"></Input>
          </FormItem>
        </Form>
      </Row>
      <div slot="footer">
        <Button type="text" @click="cancel" style="margin-right: 8px">返回</Button>
        <Button type="primary" @click="submit" :loading="modalAudit.loading">确定</Button>
      </div>
    </Modal>
    <Modal title="查看实名" v-model="previewVisible" class-name="fl-image-modal">
       <Form label-position="top">
          <FormItem label="姓名：">
             <span>{{previewItem.realname}}</span>
          </FormItem>
          <FormItem label="身份证">
              <span>{{previewItem.idcard_number}}</span>
          </FormItem>
          <FormItem label="正面图">
               <img :src="previewItem.preview_idcard_front_url" style="width: 100%">
          </FormItem>
          <FormItem label="背面图">
               <img :src="previewItem.preview_idcard_back_url" style="width: 100%">
          </FormItem>
          <FormItem label="手持图">
               <img :src="previewItem.preview_idcard_hand_url" style="width: 100%">
          </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>

const passButton = (vm, h, currentRow, index) => {
  return h('Poptip', {
    props: {
      confirm: true,
      title: '您确定通过吗? ',
      transfer: true
    },
    on: {
      'on-ok': () => {
        vm.formItem.id = currentRow.id
        vm.formItem.status = 1
        vm.submit()
      }
    }
  }, [
    h('Button', {
      style: {
        margin: '0 5px'
      },
      props: {
        type: 'primary',
        placement: 'top',
        loading: currentRow.isAuditing
      }
    }, '通过')
  ])
}
const rejectButton = (vm, h, currentRow, index) => {
  return h('Button', {
    props: {
      type: 'error'
    },
    style: {
      margin: '0 5px'
    },
    on: {
      'click': () => {
        vm.formItem.id = currentRow.id
        vm.formItem.status = 0
        vm.formItem.memo = currentRow.memo
        vm.modalAudit.show = true
      }
    }
  }, '驳回')
}

const lookButton = (vm, h, currentRow, index) => {
  return h('Button', {
    props: {
      type: 'warning'
    },
    style: {
      margin: '0 5px'
    },
    on: {
      'click': () => {
        vm.previewItem = currentRow
        vm.previewVisible = true
      }
    }
  }, '查看')
}

export default {
  name: 'real',
  data () {
    return {
      listLoading: false,
      modalAudit: {
        show: false,
        loading: false
      },
      previewVisible: false,
      previewItem: {},
      columnsList: [
        {
          title: '序号',
          type: 'index',
          width: 80,
          align: 'center'
        },
        {
          title: '用户账号',
          align: 'center',
          key: 'username',
          minWidth: 150
        },
        {
          title: '用户姓名',
          align: 'center',
          key: 'realname',
          width: 120
        },
        {
          title: '电话',
          align: 'center',
          key: 'phone',
          width: 150
        },
        {
          title: '实名状态',
          align: 'center',
          key: 'real_status_text',
          width: 120
        },
        {
          title: '审核备注',
          align: 'center',
          key: 'real_memo',
          width: 200
        },
        {
          title: '操作',
          align: 'center',
          width: 250,
          render: (h, params) => {
            var btn = [
              lookButton(this, h, params.row, params.index)
            ]
            if (params.row.real_status === 2) {
              btn.push(passButton(this, h, params.row, params.index), rejectButton(this, h, params.row, params.index))
            }
            return h('div', btn)
          }
        }
      ],
      tableData: [],
      groupList: [],
      tableShow: {
        currentPage: 1,
        pageSize: 10,
        listCount: 0
      },
      searchConf: {
        type: '',
        keywords: '',
        status: '',
        real_status: ''
      },
      modalSetting: {
        show: false,
        loading: false,
        index: 0
      },
      formItem: {
        id: 0,
        status: 0,
        memo: ''
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    submit () {
      let vm = this
      vm.modalAudit.loading = true
      vm.$easyAjax({ url: 'FrontUser/checkReal/' + (vm.formItem.id), data: vm.formItem, method: 'put' }).then(response => {
        if (response.data.code) {
          vm.modalAudit.loading = false
          vm.$Message.success(response.data.msg)
          vm.getList()
          vm.cancel()
        } else {
          vm.$Message.error(response.data.msg)
        }
      })
    },
    cancel () {
      this.modalAudit.show = false
    },
    doCancel (data) {
      if (!data) {
        this.formItem.id = 0
        this.$refs['myForm'].resetFields()
        this.modalAudit.loading = false
      }
    },
    changePage (page) {
      this.tableShow.currentPage = page
      this.getList()
    },
    changeSize (size) {
      this.tableShow.pageSize = size
      this.getList()
    },
    search () {
      this.tableShow.currentPage = 1
      this.getList()
    },
    getList () {
      let vm = this
      let params = {
        page: vm.tableShow.currentPage,
        size: vm.tableShow.pageSize,
        keywords: vm.searchConf.keywords,
        real_status: vm.searchConf.real_status
      }
      vm.listLoading = true
      vm.$easyAjax({ url: 'FrontUser/real', data: params }).then(response => {
        vm.listLoading = false
        vm.tableData = response.data.data.list
        vm.tableShow.listCount = response.data.data.count
      })
    }
  }
}
</script>
